<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人主页</title>
    <link href="../static/layui/layui.css" rel="stylesheet">
    <link href="../static/css/myui.css" rel="stylesheet">
</head>
<link href="../static/css/preview.css" rel="stylesheet">
<style>

</style>
<body>
    <ul class="layui-nav">
        <li class="layui-nav-item">
            <a href="">带徽章<span class="layui-badge">9</span></a>
        </li>
        <li class="layui-nav-item">
            <a href="">小圆点<span class="layui-badge-dot"></span></a>
        </li>
        <li class="layui-nav-item" lay-unselect>
            <a href="javascript:;">
                <img src="https://unpkg.com/outeres@0.0.10/demo/avatar/1.jpg" class="layui-nav-img">
            </a>
            <dl class="layui-nav-child">
                <dd><a href="javascript:;">子级菜单</a></dd>
                <dd><a href="javascript:;">横线隔断</a></dd>
                <hr>
                <dd style="text-align: center;"><a href="">退出</a></dd>
            </dl>
        </li>
    </ul>

    <div class="layui-container" style="margin-top: 15px">
        <div class="layui-card myui-user-background" style="background-image: url('https://file.mlog.club/images/2020/10/13/6e7933f5c9b2fe515210a17ea1762105.jpg');">
            <div class="layui-row myui-user-nickname-panel">
                <div class="layui-col-md6" style="margin-left: 130px;margin-top: 5px">
                    <div class="layui-row myui-nickname layui-font-16" style="color: black">小可的猫爬架</div>
                    <div class="layui-row" style="margin-top: 5px">这个人很懒，什么也没有留下。   </div>
                </div>
            </div>
            <div style="position:absolute;right: 40px;bottom: 30px" class="myui-subscribe-btn">
                <i class="layui-icon layui-icon-add-1" style="color: white">关注</i>
            </div>
            <div class="layui-row myui-user-avatar-container" style="">
                <img class="myui-user-avatar" src="https://unpkg.com/outeres@0.0.10/demo/avatar/1.jpg">
            </div>
        </div>

        <div class="layui-row layui-col-space12">
            <div class="layui-col-md3">
                <div class="layui-card" style="padding: 10px">
                    <div class="layui-row">
                        <span class="myui-nickname" style="color: black">个人成就</span>
                    </div>
                    <hr>
                    <div class="layui-row">
                        <div class="layui-col-md3 myui-layout-center">
                            <div style="text-align: center">
                                <div class="myui-font-color-deep-gray layui-font-12">积分</div>
                                <span class="layui-font-14" style="font-weight: bold">2213</span>
                            </div>
                        </div>
                        <div class="layui-col-md3 myui-layout-center">
                            <div style="text-align: center">
                                <div class="myui-font-color-deep-gray layui-font-12">话题</div>
                                <span class="layui-font-14" style="font-weight: bold">213</span>
                            </div>
                        </div>
                        <div class="layui-col-md3 myui-layout-center">
                            <div style="text-align: center">
                                <div class="myui-font-color-deep-gray layui-font-12">评论</div>
                                <span class="layui-font-14" style="font-weight: bold">0</span>
                            </div>
                        </div>
                        <div class="layui-col-md3 myui-layout-center">
                            <div style="text-align: center">
                                <div class="myui-font-color-deep-gray layui-font-12">排名</div>
                                <span class="layui-font-14" style="font-weight: bold">1</span>
                            </div>
                        </div>
                    </div>

                </div>

                <div class="layui-card"  style="padding: 10px">
                    <div class="layui-row">
                        <span class="myui-nickname" style="color: black">个人资料</span>
                        <a class="layui-font-14" style="float: right;margin-right: 10px">编辑资料</a>
                    </div>
                    <hr>
                    <div class="layui-row">
                        <span>昵称</span>
                        <span style="float: right;margin-right: 10px;width: 80%">小可小可小可小小可小可小可小小可小可小可小可小可</span>
                    </div>
                    <hr>
                    <div class="layui-row">
                        <span>签名</span>
                        <span style="float: right;margin-right: 10px;width: 80%">这个人很烂什么也没有留个人很烂什么也没有留个人很烂什么也没有留下</span>
                    </div>
                    <hr>
                    <div class="layui-row">
                        <span>友链</span>
                        <span style="float: right;margin-right: 10px;width: 80%">小可小可小可小可小可</span>
                    </div>
                </div>

                <div class="layui-card"  style="padding: 10px">
                    <div class="layui-row">
                        <span class="myui-nickname" style="color: black">粉丝</span>
                        <span class="myui-font-color-deep-gray" style="font-weight: bold;margin-left: 5px">110</span>
                        <a class="layui-font-14" style="float: right;margin-right: 10px;">更多</a>
                    </div>
                    <hr>
                    <div class="layui-row">
                        <div class="layui-row" style="margin-top: 8px">
                            <div class="layui-col-md2">
                                <img class="myui-avatar-small" src="https://unpkg.com/outeres@0.0.10/demo/avatar/1.jpg">
                            </div>
                            <div class="layui-col-md6">
                                <div class="layui-row">小可小可</div>
                                <div class="layui-row layui-font-12" style="height: 18px;overflow-y: hidden">人很烂什么也没有留个人很烂什么也没</div>
                            </div>
                            <div class="layui-col-md3">
                                <div class="myui-subscribe-btn" style="float: right;margin-right: -10px;margin-top: 5px">
                                    <i class="layui-icon layui-icon-add-1" style="color: white">关注</i>
                                </div>
                            </div>
                        </div>
                        <div class="layui-row" style="margin-top: 8px">
                            <div class="layui-col-md2">
                                <img class="myui-avatar-small" src="https://unpkg.com/outeres@0.0.10/demo/avatar/1.jpg">
                            </div>
                            <div class="layui-col-md6">
                                <div class="layui-row">小可小可</div>
                                <div class="layui-row layui-font-12" style="height: 18px;overflow-y: hidden">人很烂什么也没有留个人很烂什么也没</div>
                            </div>
                            <div class="layui-col-md3">
                                <div class="myui-subscribe-btn list">
                                    <i class="layui-icon layui-icon-add-1" style="color: white">关注</i>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>

                <div class="layui-card"  style="padding: 10px">
                    <div class="layui-row">
                        <span class="myui-nickname" style="color: black">关注</span>
                        <span class="myui-font-color-deep-gray" style="font-weight: bold;margin-left: 5px">110</span>
                        <a class="layui-font-14" style="float: right;margin-right: 10px;">更多</a>
                    </div>
                    <hr>
                    <div class="layui-row">
                        <div class="layui-row" style="margin-top: 8px">
                            <div class="layui-col-md2">
                                <img class="myui-avatar-small" src="https://unpkg.com/outeres@0.0.10/demo/avatar/1.jpg">
                            </div>
                            <div class="layui-col-md6">
                                <div class="layui-row">小可小可</div>
                                <div class="layui-row layui-font-12" style="height: 18px;overflow-y: hidden">人很烂什么也没有留个人很烂什么也没</div>
                            </div>
                            <div class="layui-col-md3">
                                <div class="myui-subscribe-btn list active" style="">
                                    <i class="layui-icon layui-icon-add" style="color: white">已关注</i>
                                </div>
                            </div>
                        </div>
                        <div class="layui-row" style="margin-top: 8px">
                            <div class="layui-col-md2">
                                <img class="myui-avatar-small" src="https://unpkg.com/outeres@0.0.10/demo/avatar/1.jpg">
                            </div>
                            <div class="layui-col-md6">
                                <div class="layui-row">小可小可</div>
                                <div class="layui-row layui-font-12" style="height: 18px;overflow-y: hidden">人很烂什么也没有留个人很烂什么也没</div>
                            </div>
                            <div class="layui-col-md3">
                                <div class="myui-subscribe-btn list active">
                                    <i class="layui-icon layui-icon-add-1" style="color: white">关注</i>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>

            <div class="layui-col-md9">
                <div class="layui-card" style="padding: 10px">
                    <div class="layui-row">
                        <a class="layui-font-18 myui-submenu active">话题</a>
                        <a class="layui-font-18 myui-submenu">文章</a>
                    </div>
                    <hr>
                    <div class="layui-row" id="post-list">
                        <div class="layui-row">
                            <div class="layui-card-body">
                                <div class="myui-card-header">
                                    <span class="myui-nickname">敏书</span>
                                    <span class="myui-top-tip">置顶</span>
                                    <span class="myui-time-tip">发布于2024-23-12 12:12:21</span>
                                </div>
                                <a class="myui-card-titler" target="_blank" href="http://localhost:8080">
                                    Go 语言社区系统 BBS-GO 4.0.0 发布，升级vue3、nuxt3
                                </a>
                                <div class="myui-card-content">
                                    卡片式面板面板通常用于非白色背景色的主体内
                                    从而映衬出边框投影卡片式面板面板通常用于非白色背景色的主体内
                                    从而映衬出边框投影卡片式面板面板通常用于非白色背景色的主体内
                                    从而映衬出边框投影卡片式面板面板通常用于非白色背景色的主体内
                                    从而映衬出边框投影卡片式面板面板通常用于非白色背景色的主体内
                                    从而映衬出边框投影
                                </div>
                                <div class="myui-card-footer">
                                    <div class="myui-gap">
                                        <i class="layui-icon layui-icon-star"></i>&nbsp点赞&nbsp<span>2121</span>
                                    </div>
                                    <div  class="myui-gap">
                                        <i class="layui-icon layui-icon-reply-fill"></i>&nbsp阅读&nbsp<span>2121</span>
                                    </div>
                                    <div  class="myui-gap">
                                        <i class="layui-icon layui-icon-read"></i>&nbsp浏览&nbsp<span>2121</span>
                                    </div>
                                    <div class="myui-topic-tip">开源撒撒</div>
                                </div>
                            </div>
                            <hr>
                        </div>
                        <div class="layui-row">
                            <div class="layui-card-body">
                                <div class="myui-card-header">
                                    <span class="myui-nickname">敏书</span>
                                    <span class="myui-top-tip">置顶</span>
                                    <span class="myui-time-tip">发布于2024-23-12 12:12:21</span>
                                </div>
                                <a class="myui-card-titler" target="_blank" href="http://localhost:8080">
                                    Go 语言社区系统 BBS-GO 4.0.0 发布，升级vue3、nuxt3
                                </a>
                                <div class="myui-card-content">
                                    卡片式面板面板通常用于非白色背景色的主体内
                                    从而映衬出边框投影卡片式面板面板通常用于非白色背景色的主体内
                                    从而映衬出边框投影卡片式面板面板通常用于非白色背景色的主体内
                                    从而映衬出边框投影卡片式面板面板通常用于非白色背景色的主体内
                                    从而映衬出边框投影卡片式面板面板通常用于非白色背景色的主体内
                                    从而映衬出边框投影
                                </div>
                                <div class="myui-card-footer">
                                    <div class="myui-gap">
                                        <i class="layui-icon layui-icon-star"></i>&nbsp点赞&nbsp<span>2121</span>
                                    </div>
                                    <div  class="myui-gap">
                                        <i class="layui-icon layui-icon-reply-fill"></i>&nbsp阅读&nbsp<span>2121</span>
                                    </div>
                                    <div  class="myui-gap">
                                        <i class="layui-icon layui-icon-read"></i>&nbsp浏览&nbsp<span>2121</span>
                                    </div>
                                    <div class="myui-topic-tip">开源撒撒</div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-row">
                            <div class="layui-card-body">
                                <div class="myui-card-header">
                                    <span class="myui-nickname">敏书</span>
                                    <span class="myui-top-tip">置顶</span>
                                    <span class="myui-time-tip">发布于2024-23-12 12:12:21</span>
                                </div>
                                <div class="myui-card-content">
                                    卡片式面
                                </div>
                                <ul class="myui-image-ul layui-row">
                                    <li class="myui-image-li">
                                        <img class="myui-list-image" src="https://picsum.photos/400">
                                    </li>
                                    <li class="myui-image-li">
                                        <img class="myui-list-image" src="https://picsum.photos/400">
                                    </li>
                                    <li class="myui-image-li">
                                        <img class="myui-list-image" src="https://picsum.photos/400">
                                    </li>
                                    <li class="myui-image-li">
                                        <img class="myui-list-image" src="https://picsum.photos/400">
                                    </li>
                                    <li class="myui-image-li">
                                        <img class="myui-list-image" src="https://picsum.photos/400">
                                    </li>
                                    <li class="myui-image-li">
                                        <img class="myui-list-image" src="https://picsum.photos/400">
                                    </li>
                                    <li class="myui-image-li">
                                        <img class="myui-list-image" src="https://picsum.photos/400">
                                    </li>
                                    <li class="myui-image-li">
                                        <img class="myui-list-image" src="https://picsum.photos/400">
                                    </li>
                                    <li class="myui-image-li">
                                        <img class="myui-list-image" src="https://picsum.photos/400">
                                    </li>
                                </ul>
                                <div class="myui-card-footer">
                                    <div class="myui-gap">
                                        <i class="layui-icon layui-icon-star"></i>&nbsp点赞&nbsp<span>2121</span>
                                    </div>
                                    <div  class="myui-gap">
                                        <i class="layui-icon layui-icon-reply-fill"></i>&nbsp阅读&nbsp<span>2121</span>
                                    </div>
                                    <div  class="myui-gap">
                                        <i class="layui-icon layui-icon-read"></i>&nbsp浏览&nbsp<span>2121</span>
                                    </div>
                                    <div class="myui-topic-tip">开源</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</body>
</html>
<!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
<script src="../static/layui/layui.js"></script>
<script src="../static/jquery/jquery-3.7.1.min.js"></script>
<script>
    // 获取所有 .preview 元素
    document.getElementById('post-list').addEventListener("click",(e) =>{
        e.preventDefault()
        if (e.target.classList.contains('myui-list-image')) {
            //创建预览器
            let container = document.createElement("div");
            container.classList.add("preview-container");
            container.onclick = function() {
                container.remove();
            }
            //创建预览图片
            let innerImg = document.createElement("img");
            innerImg.src = e.target.src;
            innerImg.classList.add("pic");
            //绑定滚动事件
            container.onwheel = function (event) {
                const width = getComputedStyle(innerImg).width.slice(0,-2);
                const height = getComputedStyle(innerImg).height.slice(0,-2);
                if (event.deltaY > 0) {
                    //向上滚动放大
                    innerImg.style.width = parseInt(width) * 1.1 + "px";
                    innerImg.style.height = parseInt(height) * 1.1 + "px";
                }else if (event.deltaY < 0) {
                    //向下滚动缩小
                    innerImg.style.width = parseInt(width) * 0.9 + "px";
                    innerImg.style.height = parseInt(height) * 0.9 + "px";
                }
            }
            //将图片添加到预览器
            container.append(innerImg);
            //将预览器添加到 body 中
            document.body.append(container);
        }

    })
</script>
